<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>城市距离配置</title>
    <link rel="stylesheet" type="text/css" href="/ui/themes/black/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ui/themes/icon.css">
    <script type="text/javascript" src="/ui/jquery.min.js"></script>
    <script type="text/javascript" src="/ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/ui/easyloader.js"></script>

    <script type="text/javascript">
        easyloader.theme = "black";
        //页面加载
        $(document).ready(function () {
            loadGrid();
        });

        function doSearch() {
            $('#table').datagrid('load', {
                appName: $('#appName').val(),
            });
        }

        //加载表格datagrid
        function loadGrid() {
            //加载数据
            $('#table').datagrid({
                width: 'auto',
                height: 'auto',
                striped: true,
                singleSelect: true,
                collapsible: true,
                rownumbers: true,
                pagination: true,
                method: 'get',
                url: '/config/admin/pageList',
                //queryParams:{},
                loadMsg: '数据加载中请稍后……',
                columns: [[
                    {field: 'id', title: 'ID', sortable: true, width: "10%"},
                    {field: 'appName', title: '应用名称', sortable: true, width: "10%"},
                    {field: 'scriptName', title: '脚本名称', sortable: true, width: "10%"},
                    {field: 'userId', title: '用户ID', sortable: true, width: "10%"},
                    {
                        field: 'createTime', title: '创建时间', sortable: true, width: "10%",
                        formatter: function (value, row, index) {
                            return getDate(value);
                        }
                    },
                    {
                        field: 'updateTime', title: '更新时间', sortable: true, width: "20%",
                        formatter: function (value, row, index) {
                            return getDate(value);
                        }
                    }
                ]]
            });
        }

        function getDate(value) {
            var date = new Date(value);
            var year = date.getFullYear().toString();
            var month = (date.getMonth() + 1);
            var day = date.getDate().toString();
            var hour = date.getHours().toString();
            var minutes = date.getMinutes().toString();
            var seconds = date.getSeconds().toString();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        }

        function remove() {
            var row = $('#table').datagrid('getSelected');
            if (row) {
                $.messager.confirm('信息', '您确定要删除吗?', function (r) {
                    if (r) {
                        $.ajax({
                            url: '/config/admin/remove',
                            type: 'POST',        //GET
                            async: true,         //或false,是否异步
                            data: {
                                id: row.id
                            },
                            timeout: 5000,       //超时时间
                            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                            beforeSend: function (xhr) {
                            },
                            success: function (data, textStatus, jqXHR) {
                                if (data.errorCode == "0") {
                                    msg(data.errorMsg, "info");
                                    loadGrid();
                                } else {
                                    msg(data.errorMsg, "error");
                                }

                            },
                            error: function (xhr, textStatus) {
                                $.messager.alert('信息', '删除失败!', 'error');
                            },
                            complete: function () {
                            }
                        })
                    }
                });
            }
        }

        function submitAddForm() {
            $('#addForm').form('submit', {
                dataType: "json",
                onSubmit: function () {
                    return $(this).form('enableValidation').form('validate');
                },
                success: function (data) {
                    $('#add').window('close');
                    var rs = $.parseJSON(data);
                    if (rs.errorCode == "0") {
                        doSearch();
                        msg(rs.errorMsg, "info");
                    } else {
                        msg(rs.errorMsg, "error");
                    }
                }
            });
        }

        function clearAddForm() {
            $('#addForm').form('clear');
        }

        function edit() {
            var row = $('#table').datagrid('getSelected');
            if (row) {
                $('#editForm').form('load', {
                    id: row.id,
                    appName: row.appName,
                    scriptName: row.scriptName,
                    scriptContent: row.scriptContent
                });
                $('#edit').window('open');
            }
        }

        function submitEditForm() {
            $('#editForm').form('submit', {
                dataType: "json",
                onSubmit: function () {
                    return $(this).form('enableValidation').form('validate');
                },
                success: function (data) {
                    $('#edit').window('close');
                    var rs = $.parseJSON(data);
                    if (rs.errorCode == "0") {
                        loadGrid();
                        msg(rs.errorMsg, "info");
                    } else {
                        msg(rs.errorMsg, "error");
                    }
                }
            });
        }

        function msg(msg, tag) {
            using(['dialog', 'messager'], function () {
                $('#dd').dialog({
                    title: '消息',
                    width: 300,
                    height: 200
                });
                $.messager.show({
                    title: tag,
                    msg: msg,
                    timeout: 1000
                });
            });
        }
    </script>
</head>
<body>

<!-- 表格 -->
<table id="table" title="城市距离列表" data-options="rownumbers:true,toolbar:'#tb,#ft'" style="width: 100%">
</table>

<!-- 搜索 -->
<div id="tb" style="padding:2px 5px;">
    应用名称: <input id="appName" class="easyui-textbox" style="width:110px">
    <a href="#" id="search" class="easyui-linkbutton" onclick="doSearch()" iconCls="icon-search">Search</a>
</div>
<div id="ft" style="padding:2px 5px;">
    <a href="#" onclick="$('#add').window('open')" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
    <a href="#" onclick="edit()" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
    <a href="#" onclick="remove()" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
</div>

<!-- 添加 -->
<div id="add" class="easyui-window" title="添加应用" data-options="modal:true,closed:true,iconCls:'icon-save'"
     style="width: 800px;height:600px;padding:10px;display: none">
    <div class="easyui-panel" title="添加" style="width:100%;padding:30px 60px;">
        <form id="addForm" action="/config/admin/add" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="appName" style="width:300px"
                       data-options="label:'应用名称 :',required:true"/>
                <input class="easyui-textbox" name="scriptName" style="width:300px"
                       data-options="label:'脚本名称 :',required:true"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="scriptContent" label="Groovy脚本:" labelPosition="top"
                       multiline="true" value="" style="width:100%;height:320px">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitAddForm()"
               style="width:80px">添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearAddForm()" style="width:80px">清空</a>
        </div>
    </div>
</div>

<!-- 编辑 -->
<div id="edit" class="easyui-window" title="编辑应用" data-options="modal:true,closed:true,iconCls:'icon-save'"
     style="width: 800px;height:600px;padding:10px;display: none">
    <div class="easyui-panel" title="编辑" style="width:100%;padding:30px 60px;">
        <form id="editForm" action="/config/admin/update" method="post">

            <div style="margin-bottom:20px">
                <input name="id" type="hidden"/>
                <input class="easyui-textbox" name="appName" style="width:300px"
                       data-options="label:'应用名称 :',required:true"/>
                <input class="easyui-textbox" name="scriptName" style="width:300px"
                       data-options="label:'脚本名称 :',required:true"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="scriptContent" label="Groovy脚本:" labelPosition="top"
                       multiline="true" value="" style="width:100%;height:320px">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitEditForm()"
               style="width:80px">编辑</a>
        </div>
    </div>
</div>
</body>
</html>